

<template>
    <div class="ques">
      <MyHead :title="$route.query.ques" ></MyHead>
      <div class="ques-box">
        <h2>题目: {{ $route.query.ques }}</h2>
        <!-- <van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0' }" /> -->

        <div class=" mt10">
          <van-field
            v-model="answer"
            rows="6"
            autosize
            type="textarea"
            maxlength="400"
            placeholder="请回答你的理解"
            show-word-limit
            class="textarea"
          />
          <div class="mt10">
            <van-button @click="addAnswerToOne" :disabled="!answer" block type="primary" >提交答案</van-button>
          </div>
        </div>

        <div class="alist mt20" >
          <div v-if="list.length>0">
            <van-divider
              :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0' }"
            >
              所有答案({{ list.length }})
            </van-divider>

            <div class="anlist">
                <div class="aitem" v-for="(item,index) in list" :key="index">
                    <div class="left">
                        <Avatar :src="item.userInfo.avatar"></Avatar>
                    </div>
                    <div class="right">
                        <h3 class="name ">{{ item.userInfo.username }} <span v-if="$route.query.phone==item.userInfo.phone" style="color:#EE6666">(面试者)</span></h3>
                        <div class="answer mt5">
                          {{ item.answer }}
                        </div>
                        <div class="time mt10">

                            <span> {{item.time | timeFormat(true) }}</span>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="empty" v-else>
            <van-empty
              class="custom-image"
              image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
              description="没有答案哦~"
            />
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { todoaddanswersone , todogetanswerlist , todochangemshot  } from '@/api/api'
export default {
  data(){
    return {
      id:'',
      answer:'',
      mid:'',
      list:[]
    }
  },
  methods:{
    async changemsHot(){
      let res = await todochangemshot({
        _id:this.mid,
        hot:this.$route.query.hot * 1 +4
      })
      if(res.code==200){

      }
    },
    async getListData(){
      let res = await todogetanswerlist({
        id:this.id,
      })
      if(res.code==200){
        this.list = res.result;
      }
    },
    async addAnswerToOne(){
      let res = await todoaddanswersone({
        mid:this.mid,
        id:this.id,
        title:this.$route.query.ques,
        time:new Date(),
        answer:this.answer,
      })
      if(res.code==200){
        this.ShowSuccess('回答成功')
        this.answer = '';
        this.changemsHot() // 修改热度
        this.getListData()
      }
    }
  },
  mounted(){
    this.id = this.$route.params.id;  //回答题的id
    this.mid = this.$route.params.id.split('_ques_')[0]  // 这次面试的id
    this.getListData()
  }
}
</script>


<style lang="scss" scoped>
.anlist{
  width:100%;
  height:500px;
  overflow: auto;
  .aitem{
    display: flex;
    margin-top:18px;
    border-bottom:0.5px solid #ddd;
    padding-bottom:10px;
    .name{
      color:#999;
      font-size: 14px;
    }
    .answer{
      color:#000;
      font-weight:bold;
      font-size: 16px;
    }
    .time{
      color:#999;
      font-size: 14px;

    }
  }
}
.textarea{
  border:0.5px solid #ddd;
  border-radius: 10px;
}
.ques{
  &-box{
    padding:15px;
  }
}
</style>
